<template>
    <div class="edit-img-left-box">
        <div class="left-icon-box">
            <div
                class="left-icon"
                v-for="item in leftIconList"
                :key="item.icon"
                :class="activeType == item.icon ? 'active-color' : ''"
                @click="iconTap(item.icon)"
            >
                <Icon
                    :type="item.icon"
                    style="font-size: 30px"
                    :class="activeType == item.icon ? 'active-icon-color' : ''"
                />
                <div
                    class="icon-text"
                    :class="activeType == item.icon ? 'active-icon-color' : ''"
                >
                    {{ item.text }}
                </div>
            </div>
        </div>
        <div class="left-right-edit">
            <div
                class=""
                v-show="activeType == 'md-chatboxes'"
                style="width: 100%"
            >
                <Row>
                    <Col span="8">
                        <div class="md-list-left">
                            <span style="color: red">*</span>省份
                        </div>
                    </Col>
                    <Col span="12">
                        <div class="md-list-right">
                            <Select style="width: 200px">
                                <Option :value="'1'">1</Option>
                                <Option :value="'2'">2</Option>
                            </Select>
                        </div>
                    </Col>
                </Row>
                <Row>
                    <Col span="8">
                        <div class="md-list-left">
                            <span style="color: red">*</span>素材名称
                        </div>
                    </Col>
                    <Col span="12">
                        <div class="md-list-right">
                            <Input
                                style="width: 200px"
                                show-word-limit
                                maxlength="20"
                            ></Input>
                        </div>
                    </Col>
                </Row>
                <Row>
                    <Col span="8">
                        <div class="md-list-left">选择素材标签</div>
                    </Col>
                    <Col span="12">
                        <div class="md-list-right">
                            <Button type="primary">选择标签</Button>
                        </div>
                    </Col>
                </Row>
                <Row>
                    <Col span="8">
                        <div class="md-list-left">
                            <span style="color: red">*</span>素材使用场景
                        </div>
                    </Col>
                    <Col span="12">
                        <div class="md-list-right" style="align-items: inherit">
                            <div style="margin-top: 30px">
                                <RadioGroup v-model="type">
                                    <Radio label="apple">
                                        <span>5G消息或视频短信图片素材</span>
                                    </Radio>
                                    <Radio label="android">
                                        <span>短信小程序2.0图片素材</span>
                                    </Radio>
                                </RadioGroup>
                            </div>
                        </div>
                    </Col>
                </Row>
            </div>
            <div class="text-box" v-show="activeType == 'md-text'">
                <Button
                    class="add-text-btn"
                    @click="addText(1)"
                    type="primary"
                    style="margin-bottom: 30px"
                    label="large"
                >
                    点击添加标题
                </Button>
                <Button
                    class="add-text-btn"
                    @click="addText(2)"
                    type="primary"
                    label="large"
                >
                    点击添加正文
                </Button>
            </div>
            <div style="width: 100%" v-show="activeType == 'md-albums'">
                <div class="bg-btn">
                    <Icon type="md-image" style="font-size: 30px" />
                    <span>上传背景图</span>
                    <input
                        type="file"
                        class="bg-btn-inp"
                        @input="bgFileInput"
                        ref="bgFiles"
                        accept="image/jpg, image/png"
                    />
                </div>
                <div style="padding: 20px; font-weight: bold">设定背景色：</div>
                <div class="bg-color-list-box">
                    <div class="bg-color-list color-picker-btn">
                        <ColorPicker
                            v-model="color1"
                            @on-change="colorChange"
                            style="margin-top: 10px"
                            alpha
                        />
                    </div>
                    <div
                        class="bg-color-list bg-color-transparent"
                        @click="setBgColor('')"
                    >
                        <div class="bg-color-transparent-div"></div>
                    </div>
                    <div
                        class="bg-color-list"
                        v-for="item in btnColorList"
                        :key="`colorBtn${item}`"
                        :style="{ background: item }"
                        @click="setBgColor(item)"
                    ></div>
                </div>
                <div class="bg-btn">
                    <Icon type="ios-cloud-upload" style="font-size: 30px" />
                    <span>上传图标</span>
                    <input
                        type="file"
                        class="bg-btn-inp"
                        @input="fileInput"
                        ref="files"
                        accept="image/jpg, image/png"
                    />
                </div>
            </div>
            <div v-show="activeType == 'ios-image-outline'">
                <div class="search-box">
                    <Input
                        style="width: 300px"
                        placeholder="搜索素材名称"
                    ></Input>
                    <Button class="search-btn" type="primary">搜索</Button>
                </div>
                <div class="img-list">
                    <div class="img-item">
                        <div class="img-item-title">这个是标题</div>
                        <img
                            :src="demoSrc"
                            alt=""
                            srcset=""
                            style="width: 100%"
                            @click="addImg(demoSrc)"
                        />
                    </div>
                    <div class="img-item">
                        <div class="img-item-title">这个是标题</div>

                        <img
                            :src="demoSrc"
                            alt=""
                            srcset=""
                            style="width: 100%"
                            @click="addImg(demoSrc)"
                        />
                    </div>
                    <div class="img-item">
                        <div class="img-item-title">这个是标题</div>

                        <img
                            :src="demoSrc"
                            alt=""
                            srcset=""
                            style="width: 100%"
                            @click="addImg(demoSrc)"
                        />
                    </div>
                </div>
                <div class="page-box">
                    <Page
                        :total="total"
                        show-total
                        style="margin-right: 20px"
                        @on-change="pageChange"
                        @on-page-size-change="pageSizeChange"
                        :page-size-opts="pageSizeOpts"
                        show-sizer
                        size="small"
                        :current="pageNum"
                        :page-size="pageSize"
                    />
                </div>
                <!-- -->
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            demoSrc:
                "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2F83025aafa40f4bfb34053bdc0866f0fcf6361812.jpeg%40f_auto%3Ftoken%3Dee2d57666cd27c587703661edb6ffc85&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1691514000&t=38ac49f490517a164749a5ed7eecfbc3",
            leftIconList: [
                {
                    icon: "md-chatboxes",
                    type: "",
                    text: "描述",
                },
                {
                    icon: "md-text",
                    type: "",
                    text: "文字",
                },
                {
                    icon: "md-albums",
                    type: "",
                    text: "背景",
                },
                {
                    icon: "ios-image-outline",
                    type: "",
                    text: "素材",
                },
            ],
            activeType: "ios-image-outline",
            color1: "white",
            type: "",
            btnColorList: [
                "#ffffff",
                "#ececec",
                "#000000",
                "#e8473d",
                "#ea635e",
                "#eb71c0",
                "#bd73df",
                "#8359f6",
                "#5527ff",
                "#4695af",
                "#5bbddb",
                "#83dee4",
                "#61b4f8",
                "#1d4ba7",
                "#5abb6c",
                "#95d568",
                "#cefc84",
                "#f9de6f",
                "#f4bf6b",
                "#f2ab3b",
                "#f4936b",
                "#f07c10",
                "#f45d1d",
            ],
            total: 50,
            pageNum: 1,
            pageSize: 8,
            pageSizeOpts: [8, 16, 24],
        };
    },
    methods: {
        pageChange(val) {
            console.log(val);
        },
        pageSizeChange(val) {
            this.pageNum = 1;
        },
        iconTap(type) {
            this.activeType = type;
        },
        addText(sizeType = 2) {
            // type 1 文本标题 字号60  2位文本 字号36
            this.$emit("addText", sizeType);
        },
        addImg(src) {
            this.$emit("addImg", src);
        },
        bgFileInput() {
            const file = this.$refs.bgFiles.files[0];
            const { size } = file;
            console.log(size);
            console.log(size / 100);
            if (size / 1000 > 300) {
                this.$Message.error("图片大小不能超过300k");
                return;
            }
            const _this = this;
            const imageToBase64 = (file) => {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => {
                    _this.$emit("addBgImg", reader.result);
                };
                reader.onerror = function (error) {
                    console.log("Error: ", error);
                };
            };
            imageToBase64(file);
        },
        fileInput() {
            const file = this.$refs.files.files[0];
            const _this = this;
            const imageToBase64 = (file) => {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => {
                    _this.$emit("addIconImg", reader.result);
                };
                reader.onerror = function (error) {
                    console.log("Error: ", error);
                };
            };
            imageToBase64(file);
        },
        setBgColor(val) {
            this.colorChange(val);
        },
        colorChange(val) {
            this.$emit("setBgColor", val);
        },
    },
};
</script>

<style scoped>
.edit-img-left-box {
    width: 500px;
    height: 800px;
    /* background: red; */
    display: flex;
}
.left-icon-box {
    width: 60px;
}
.left-icon {
    width: 60px;
    height: 80px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    border-left: 6px solid white;
    transition: 0.2s;
}
.active-color {
    border-left: 6px solid #2d8cf0;
}
.active-icon-color {
    color: #2d8cf0;
}
.icon-text {
    font-size: 14px;
}
.left-right-edit {
    flex: 1;
    display: flex;
}
.add-text-btn {
    width: 100%;
}
.text-box {
    margin: 20px;
    width: 100%;
}
.upload-btn-box {
    position: relative;
    height: 32px;
}
.upload-icon {
    width: 98%;
    margin-left: 1%;
}
.upload-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 32px;
    opacity: 0;
}
.md-list-left {
    height: 80px;
    line-height: 80px;
    text-align: right;
    padding-right: 20px;
}
.md-list-right {
    height: 80px;
    display: flex;
    align-items: center;
}
.bg-btn {
    width: 90%;
    height: 60px;
    background: #2d8cf0;
    margin: 20px 5%;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
}
.bg-btn-inp {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
}
.bg-color-list-box {
    width: 420px;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    margin-left: 20px;
}
.bg-color-list {
    width: 60px;
    height: 60px;
    /* background: red; */
    margin-right: 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #e3e3e3a7;
}
.color-picker-btn {
    background: url(~@/assets/bg-color-btn.jpg) no-repeat;
    background-size: 110% 110%;
    background-position-x: -2px;
    background-position-y: -4px;
}
.bg-color-transparent {
    background: url(~@/assets/bg-color-transparent.jpg) no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bg-color-transparent-div {
    width: 2px;
    height: 80px;
    background: red;
    transform: rotate(45deg);
}
.bg-color-list /deep/ .ivu-color-picker-input {
    opacity: 0;
}
.bg-color-list /deep/ .ivu-input-icon {
    opacity: 0 !important;
}
.search-box {
    display: flex;
    width: 100%;
    padding: 20px;
}
.search-btn {
    margin-left: 20px;
}
.img-list {
    width: 420px;
    margin-left: 20px;
    max-height: 640px;
    overflow: auto;
}
.img-item {
    border: 1px solid #e3e3e3a7;
    width: 190px;
    height: 150px;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 4px;
    float: left;
}
.img-item-title {
    font-size: 12px;
    padding: 2px;
}
.page-box {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
</style>
